<template>
	<view class="category-container page-container">
		<!-- 分类列表 -->
		<view class="category-list">
			<view class="category-item" v-for="(category, index) in categories" :key="category.id">
				<view class="category-main">
					<view class="category-image" v-if="category.group_icon">
						<image :src="$tools.buildUrl(category.group_icon)" class="category-img" mode="aspectFit">
						</image>
					</view>
					<view class="category-info">
						<view class="category-header">
							<text class="category-name">{{ category.group_name }}</text>
							<view class="category-status" :class="category.group_status===1?'active':'inactive'">
								<text class="status-text">{{ category.group_status === 1 ? '启用' : '禁用' }}</text>
							</view>
						</view>
						<!-- <text class="category-desc">{{ category.description }}</text> -->
						<view class="category-stats">
							<text class="product-count">首页模式：{{ getShowType(category.show_type) }}</text>
							<text class="sort-order">排序：{{ category.group_sort }}</text>
						</view>
					</view>
				</view>
				<view class="category-actions">
					<view class="action-btn" @click="editCategory(category)">
						<text class="action-text">编辑</text>
					</view>
					<view class="action-btn" @click="toggleStatus(category)">
						<text class="action-text">{{ category.group_status === 1 ? '禁用' : '启用' }}</text>
					</view>
					<view class="action-btn delete-btn" @click="deleteCategory(category)">
						<text class="action-text">删除</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部添加按钮 -->
		<view class="bottom-add-btn">
			<button class="add-btn-text" @click="addCategory">添加分类</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasSearched: false,
				recordCount: 0,
				page: 1,
				limit: 10,
				categories: [] // 分类列表
			}
		},
		onLoad(options) {
			this.onSearch()
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			if (!this.hasSearched) {
				this.page = 1
				this.recordCount = 0
				this.categories = []
				this.loadDataList()
			}
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			// 下拉触底，先判断是否有请求正在进行中
			// 以及检查当前请求页数是不是小于数据总页数，如符合条件，则发送请求
			const page = this.page
			const limit = this.limit
			const recordCount = this.recordCount
			if (!this.hasSearched && page * limit < recordCount) {
				this.page++
				setTimeout(() => {
					this.loadDataList()
				}, 500)
			}
		},
		methods: {
			onSearch() {
				this.page = 1
				this.recordCount = 0
				this.categories = []
				this.loadDataList()
			},
			loadDataList() {
				if (this.hasSearched) {
					return false
				}
				this.hasSearched = true
				this.$api.agent.GetProductGroupList({
					page: this.page,
					limit: this.limit,
				}).then(res => {
					this.hasSearched = false
					this.recordCount = res.count
					this.categories = this.categories.concat(res.data)
				}).catch(err => {
					this.hasSearched = false
					if (this.page > 0) {
						this.page--
					}
				})
			},

			// 添加分类
			addCategory() {
				uni.navigateTo({
					url: '/dealer-package/product/category-edit'
				})
			},

			// 编辑分类
			editCategory(category) {
				uni.navigateTo({
					url: `/dealer-package/product/category-edit?id=${category.id}`
				})
			},

			// 切换状态
			toggleStatus(category) {
				const new_status = category.group_status === 1 ? 0 : 1

				this.$api.agent.SetProductGroup({
					id: category.id,
					group_status: new_status
				}).then(res => {
					category.group_status = new_status

					uni.showToast({
						title: res.msg,
						icon: 'success'
					})
				})
			},

			// 删除分类
			deleteCategory(category) {
				uni.showModal({
					title: '确认删除',
					content: `确定要删除分类"${category.group_name}"吗？`,
					success: (res) => {
						if (res.confirm) {
							this.$api.agent.DelProductGroup({
								id: category.id
							}).then(res => {
								this.categories.splice(index, 1)

								uni.showToast({
									title: '删除成功',
									icon: 'success'
								})
							})
						}
					}
				})
			},

			getShowType(type) {
				// 首页模式：1-轮播 2-横幅 3-双列 4-单列
				const textMap = {
					'1': '轮播',
					'2': '横幅',
					'3': '双列',
					'4': '单列',
				}
				return textMap[type] || '未知'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category-container {
		background-color: #f8f9fa;
		min-height: 100vh;
		padding: 20rpx;
		padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
	}

	/* 分类列表 */
	.category-list {
		padding-bottom: 20rpx;
	}

	.category-item {
		background-color: white;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		overflow: hidden;
	}

	.category-main {
		padding: 30rpx;
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
	}

	.category-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		overflow: hidden;
		background-color: #f0f0f0;
		flex-shrink: 0;
	}

	.category-img {
		width: 100%;
		height: 100%;
	}

	.category-info {
		flex: 1;
	}

	.category-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.category-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.category-status {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
	}

	.category-status.active {
		background-color: #e8f5e8;
		color: #52a58a;
	}

	.category-status.inactive {
		background-color: #ffeaa7;
		color: #d63031;
	}

	.status-text {
		font-size: 22rpx;
	}

	.category-desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 15rpx;
		display: block;
	}

	.category-stats {
		display: flex;
		gap: 30rpx;
	}

	.product-count,
	.sort-order {
		font-size: 24rpx;
		color: #999;
	}

	.category-actions {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #f0f0f0;
		background-color: #fafafa;
	}

	.action-btn {
		background-color: #f8f9fa;
		border: 1rpx solid #e5e5e5;
		border-radius: 20rpx;
		padding: 12rpx 24rpx;
		font-size: 24rpx;
		color: #333;
		transition: all 0.3s ease;
		flex: 1;
		text-align: center;
		margin: 0 5rpx;
	}

	.action-btn.delete-btn {
		background-color: #ffe8e8;
	}

	.action-btn.delete-btn .action-text {
		color: #ff4757;
	}

	.action-text {
		font-size: 24rpx;
		color: #333;
	}

	/* 底部添加按钮 */
	.bottom-add-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
		border-top: 2rpx solid #e5e5e5;
		padding: 30rpx;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.add-btn-text {
		background: linear-gradient(135deg, #52a58a 0%, #6bb6a3 100%);
		color: white;
		font-size: 32rpx;
		font-weight: 600;
		border: none;
		border-radius: 50rpx;
		padding: 28rpx 80rpx;
		width: 100%;
		text-align: center;
		box-shadow: 0 6rpx 20rpx rgba(82, 165, 138, 0.3);
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
	}

	.add-btn-text:active {
		transform: translateY(2rpx);
		box-shadow: 0 4rpx 16rpx rgba(82, 165, 138, 0.3);
	}
</style>